<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="./js/package/dist/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 420px; height: 285px; background-color: #201540;" "></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
    let xData =  ['超标未检查', '无证扫码', '打电话报警','抽烟报警']
    let yData = [300, 800, 450, 700]
    let colorList = [ new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                    {offset: 0, color: '#00fdff'},
                    {offset: 0.2, color: '#04f8ff'},
                    {offset: 0.5, color: '#0ccfff'},
                    {offset: 0.8, color: '#11b8ff'},
                    {offset: 1, color: '#0db7ff'}
                  ]
                ), new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                    {offset: 0, color: '#97c656'},
                    {offset: 0.2, color: '#96c553'},
                    {offset: 0.5, color: '#7fbb25'},
                    {offset: 0.8, color: '#7aba1e'},
                    {offset: 1, color: '#7bbe23'}
                  ]
                ), new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                    {offset: 0, color: '#ff8800'},
                    {offset: 0.3, color: '#fa9e00'},
                    {offset: 0.4, color: '#ffbf00'},
                    {offset: 0.7, color: '#fed000'},
                    {offset: 1, color: '#f9ce03'}
                  ]
                ),new echarts.graphic.LinearGradient(0,1, 0, 0, [
                    {offset: 0, color: '#f5c300'},
                    {offset: 0.1, color: '#f9bf13'},
                    {offset: 0.2, color: '#e38350'},
                    {offset: 0.3, color: '#df7460'},
                    {offset: 0.4, color: '#db7164'},
                    {offset: 0.5, color: '#d86a6b'},
                    {offset: 0.6, color: '#c3478f'},
                    {offset: 0.7, color: '#a83e98'},
                    {offset: 1, color: '#6926b3'}
                  ]
                )]
    let visualMapPiecesData = []
    for (var i = 0; i < xData.length; i++) {
      visualMapPiecesData.push({
        value: yData[i],
        // label: xData[i]+"—"+yData[i],
        color: colorList[i]
      })
    }
    var option = {
  
      angleAxis: {
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLine: {
          show: false
        },
        clockwise: false,
        max: 1000,
        startAngle:45,
      },
      radiusAxis: {
        type: 'category',
        data: xData,
        z: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLine: {
          show: false
        }
      },
      polar: {
        radius: [42, 112] //总体的最小半径，最大半径
      },
      tooltip: {
      },
      visualMap: {
        // show:false,
        type:"piecewise",
        top: 10,
        itemSymbol: 'circle',
        textStyle: {
          color: '#ffffff'
        },
        pieces: visualMapPiecesData,
        outOfRange: {
          color: '#e4127d'
        }
      },
      series: [{
        type: 'bar',
        data: yData,
        coordinateSystem: 'polar',
        roundCap: true, //柱状图末端呈现圆角  
        barWidth:"18",
        showBackground:true,
          backgroundStyle:{
            color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                {offset: 0,color: '#1f143f'},
                {offset: 0.5,color: '#381d6c'},
                {offset: 1,color: '#5426a0'}
              ]
            )
          },
      }]
    }
    this.chartPie = echarts.init(document.getElementById('main'))
    this.chartPie.setOption(option)
    window.addEventListener('resize', () => {
      this.chartPie.resize()
    })

</script>
</body>
</html>